<template>
    <div class="publicpageview">
        <div class="publicformview">
            <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm" label-width="100px">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="管理单位：" prop="districtId">
                            <el-select v-model="listQuery.districtId" clearable @change="handleQuchange">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="管理部：" prop="houseAdminId">
                            <el-select v-model="listQuery.houseAdminId" clearable>
                                <el-option v-for="item in houseAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="所号：" prop="blockId">
                            <el-input v-model="listQuery.blockId"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="所地址：" prop="blockAddress">
                            <el-input v-model="listQuery.blockAddress"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="计划年份：" prop="projectYear">
                            <el-date-picker v-model="listQuery.projectYear" type="year" placeholder="选择年">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="工程类别：" prop="engineeringCategory">
                            <el-select v-model="listQuery.engineeringCategory" @change="handleOneChange1">
                                <el-option v-for="item in oneList" :label="item.classname" :value="item.classname"
                                    :key="item.classid"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="修缮项目：" prop="repairProject">
                            <el-select v-model="listQuery.repairProject">
                                <el-option v-for="item in twoList1" :label="item.classmid" :value="item.classmid"
                                    :key="item.classmidid"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="开工年月：" prop="commencementTime">
                            <el-date-picker v-model="listQuery.commencementTime" type="month" placeholder="年/月">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="施工年月：" prop="completionTime">
                            <el-date-picker v-model="listQuery.completionTime" type="month" placeholder="年/月">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>


                    <el-col :span="4">
                        <div style="padding-left: 90px;">
                            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
                            <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="publitableview">
            <!-- <el-button type="primary" size="mini" @click="handleAddUser('add')">计划录入</el-button> -->
            <el-button type="primary" size="mini" @click="handleBatchImport">导入年计划</el-button>
            <!-- <el-button type="primary" size="mini" @click="handleReportDialogOpen">计划上报</el-button> -->
            <el-table :data="list" border fit highlight-current-row size="mini">
                <el-table-column align="center" label="区房屋管理单位" prop="districtName">
                </el-table-column>
                <el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
                </el-table-column>
                <el-table-column align="center" label="所号" prop="blockId">
                </el-table-column>
                <el-table-column align="center" label="所地址" prop="blockAddress">
                </el-table-column>

                <el-table-column align="center" label="工程年份" prop="projectYear">

                </el-table-column>

                <el-table-column align="center" label="房屋性质" prop="propertyType">
                </el-table-column>

                <el-table-column align="center" label="工程类别" prop="engineeringCategory">
                </el-table-column>

                <el-table-column align="center" label="修缮项目" prop="repairProject">
                </el-table-column>


                <el-table-column align="center" label="操作" width="180" fixed="right">
                    <template slot-scope="scope">
                        <!-- <el-button type="text" v-if="scope.row.isPlanSubmission == 1" size="mini"
                            @click="handleReportCallback(scope.row.id)">计划退回</el-button>
                        <el-button type="text" v-else size="mini"
                            @click="handleReportPass(scope.row.id)">计划上报</el-button> -->
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row, 'update')">修改</el-button>
                        <el-button type="text" size="mini" @click="handleUpdate(scope.row,'details')">详情</el-button>
                        <!-- <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="publicpaginationview">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    small></el-pagination>
            </div>
        </div>

        <el-dialog :title="isAdd == 'add' ? '月修缮计划录入' : isAdd == 'update' ? '月修缮计划修改' : '月修缮计划详情'"
            :visible.sync="dialogVisible" width="60%" :before-close="handleClose">


            <el-button type="text" size="mini" @click="handleShowJilu"
                style="padding-left: 30px;margin-bottom: 20px;">完成进度记录</el-button>
            <el-form :model="formData" ref="dataForm" class="demo-ruleForm" label-position="right" label-width="150px"
                size="mini">

                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="区房屋管理单位：" prop="districtId">
                            <el-select v-model="formData.districtId" @change="handleFormQuchange"
                                :disabled="formData.status == 1">
                                <el-option v-for="item in areaList" :label="item.dname" :value="item.did"
                                    :key="item.did"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="管理部(分中心)：" prop="houseAdminId">
                            <el-select v-model="formData.houseAdminId" @change="handleHouseChange"
                                :disabled="formData.status == 1">
                                <el-option v-for="item in houseFormAdminList" :label="item.aname" :value="item.aid"
                                    :key="item.aid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="管片：" prop="blockGroupId">
                            <el-select v-model="formData.blockGroupId" @change="handleGuanpianChange"
                                :disabled="formData.status == 1">
                                <el-option v-for="item in guanpianList" :label="item.groupnew" :value="item.groupnew"
                                    :key="item.groupnumber"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所号：" prop="blockId">
                            <el-select v-model="formData.blockId" @change="handleSuoChange"
                                :disabled="formData.status == 1">
                                <el-option v-for="item in suoList" :label="item.creatingdeptno" :value="item.blockid"
                                    :key="item.blockid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="所地址：" prop="blockAddress">
                            <el-input v-model="formData.blockAddress" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="房屋性质：" prop="propertyType">
                            <el-input v-model="formData.propertyType" :disabled="true"></el-input>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="工程类别：" prop="engineeringCategory">
                            <el-select v-model="formData.engineeringCategory" @change="handleOneChange"
                                :disabled="formData.status == 1">
                                <el-option v-for="item in oneList" :label="item.classname" :value="item.classname"
                                    :key="item.classid"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>


                    <el-col :span="8">
                        <el-form-item label="修缮项目：" prop="repairProject">
                            <el-select v-model="formData.repairProject" @change="handleTwoChange"
                                :disabled="formData.status == 1">
                                <el-option v-for="item in twoList" :label="item.classmid" :value="item.classmid"
                                    :key="item.classmidid"></el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>



                    <el-col :span="8" v-show="formData.workloadName">
                        <el-form-item label="工作量：" prop="workloadValue">
                            <el-input v-model="formData.workloadValue" :disabled="formData.status == 1">
                                <template slot="append">{{formData.workloadName}}</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="工程年份：" prop="projectYear">
                            <el-date-picker v-model="formData.projectYear" type="year" placeholder="年"
                                :disabled="formData.status == 1">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="项目预算（万元）：" prop="projectYusuan">
                            <el-input v-model="formData.projectYusuan" :disabled="formData.status == 1">
                                <!-- <template slot="append">万元</template> -->
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="开工时间：" prop="commencementTime">
                            <el-date-picker v-model="formData.commencementTime" type="date" placeholder="选择日期"
                                :disabled="formData.status == 1">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="竣工时间：" prop="completionTime">
                            <el-date-picker v-model="formData.completionTime" type="date" placeholder="选择日期"
                                :disabled="formData.status == 1">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="完成进度：" prop="jindu">
                            <el-input v-model="formData.jindu" :disabled="formData.status == 1">
                                <template slot="append">%</template>
                            </el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="备注：" prop="note">
                            <el-input v-model="formData.note" :disabled="formData.status == 1"></el-input>
                        </el-form-item>
                    </el-col>


                </el-row>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false" size="medium" v-if="isAdd == 'details'">返
                    回</el-button>
                <el-button type="primary" @click="handleSubmitClick" size="medium" v-else>保 存</el-button>
            </span>
        </el-dialog>


        <!-- 批量导入弹窗 -->
        <el-dialog title="导入年计划" :visible.sync="uploadDialogVisible" width="60%" @close="handleUploadDialogClose">
            <el-button type="primary" v-if="multipleSelection.length > 0" size="mini" @click="handleDaoruSelect">导
                入</el-button>
            <div class="report-table">
                <el-table @selection-change="handleSelectionChange" :data="reportDaoruTableData" border fit
                    highlight-current-row size="mini">
                    <el-table-column type="selection" width="55" align="center" />
                    <el-table-column align="center" label="区房屋管理单位" prop="districtName">
                    </el-table-column>
                    <el-table-column align="center" label="管理部(分中心)" prop="houseAdminName">
                    </el-table-column>
                    <el-table-column align="center" label="所号" prop="blockId">
                    </el-table-column>
                    <el-table-column align="center" label="所地址" prop="blockAddress">
                    </el-table-column>

                    <el-table-column align="center" label="工程年份" prop="projectYear">
                        <template slot-scope="scope">
                            {{getTime(scope.row.projectYear)}}
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="房屋性质" prop="propertyType">
                    </el-table-column>

                    <el-table-column align="center" label="工程类别" prop="engineeringCategory">
                    </el-table-column>

                    <el-table-column align="center" label="修缮项目" prop="repairProject">
                    </el-table-column>

                </el-table>
                <div class="publicpaginationview">
                    <el-pagination @size-change="handleDaoruSizeChange" @current-change="handleCurrentDaoruChange"
                        :current-page="daoruPageNum" background :page-sizes="[10, 20, 50, 100]"
                        :page-size="daoruPageSize" layout="total, sizes, prev, pager, next, jumper" :total="daorutotal"
                        small></el-pagination>
                </div>

            </div>

        </el-dialog>


        <el-dialog title="月修缮计划上报" :visible.sync="reportVisible" width="60%" @close="handleReportDialogClose">
            <div class="report-top">
                <span>计划年份：</span>
                <el-date-picker v-model="reportYear" type="year" placeholder="选择年" size="mini">
                </el-date-picker>
                <el-button type="primary" size="mini" @click="handleSearchReportData">查 询</el-button>
            </div>

            <div class="report-table">
                <el-table :data="reportTableData" border fit highlight-current-row size="mini"
                    @selection-change="handleSelectionChange">

                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column align="center" label="区房屋管理单位" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="管理部(分中心)" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="所号" prop="id">
                    </el-table-column>
                    <el-table-column align="center" label="所地址" prop="name">
                    </el-table-column>

                    <el-table-column align="center" label="工程年份" prop="name">
                    </el-table-column>

                    <el-table-column align="center" label="房屋性质" prop="name">
                    </el-table-column>

                    <el-table-column align="center" label="工程类别" prop="name">
                    </el-table-column>

                    <el-table-column align="center" label="修缮项目" prop="name">
                    </el-table-column>
                </el-table>
            </div>

            <div slot="footer" class="dialog-footer">

                <el-button type="primary" size="mini" @click="handleReportPass">计划上报</el-button>
            </div>

        </el-dialog>


        <el-dialog title="进度记录" :visible.sync="jindu" width="60%" @close="handleJinduClose">

            <div class="report-table">
                <el-table :data="jinduData" border fit highlight-current-row size="mini">

                    <el-table-column align="center" label="修改时间" prop="createTime">
                    </el-table-column>
                    <el-table-column align="center" label="修改人" prop="adminName">
                    </el-table-column>
                    <el-table-column align="center" label="完成进度" prop="jindu">
                    </el-table-column>


                </el-table>
                <div class="publicpaginationview">
                    <el-pagination @size-change="handlejindusizechange" @current-change="handlejinduchange"
                        :current-page="jinduPage" background :page-sizes="[10, 20, 50, 100]" :page-size="jinduSize"
                        layout="total, sizes, prev, pager, next, jumper" :total="jinduTotal" small></el-pagination>
                </div>

            </div>

        </el-dialog>
    </div>
</template>

<script>

import { getArea, getHouseAdmin, getBlockGroup, getBlockByGroup, upload } from '@/api/common'
import {
    getClassmid,
    getClassdetail,
    getClassNewAll
} from '@/api'
import { listPlanMonth, createPlanMonth, updatePlanMonth, deletePlanMonth, reportPlanMonth, backPlanMonth, listPlanYearForImport, PlanMonthRecorde } from '@/api/repair'
import moment from 'moment';
import { Message } from 'element-ui'
export default {
    name: "AccommodationManagementIndex",

    data() {
        return {
            listQuery: {
                pageNum: 1,
                pageSize: 10,
                districtId: "",
                houseAdminId: "",
                blockId: "",
                blockAddress: "",
                projectYear: "",
                repairProject: "",
                completionTime: null,
                commencementTime: null,
                repairProject: "",
                engineeringCategory: ""
            },
            reportYear: null,
            reportTableData: [],
            reportDaoruTableData: [],
            reportVisible: false,
            total: 0,
            options: [{ key: "1" }],
            list: [],
            isIndeterminate: false,
            dialogVisible: false,
            isAdd: 'add',
            formData: {
                districtId: null,
                houseAdminId: null,
                blockGroupId: null,
                blockId: null,
                blockAddress: '',
                blockName: '',
                propertyType: null,
                engineeringCategory: null,
                repairProject: null,
                projectYear: '',
                workloadName: '',
                workloadArea: '',
                projectYusuan: '',
                commencementTime: '',
                completionTime: '',
                note: '',
                workloadValue: "",
                commencementTime: "",
                completionTime: "",
                jindu: ""
            },

            uploadDialogVisible: false,
            importLoading: false,
            multipleSelection: [],
            daoruPageNum: 1,
            daoruPageSize: 10,
            daorutotal: 0,
            areaList: [],
            houseAdminList: [],
            houseFormAdminList: [],
            guanpianList: [],
            suoList: [],
            oneList: [],
            twoList: [],
            twoList1: [],
            threeList: [],

            jinduPage: 1,
            jinduSize: 10,
            jinduData: [],
            jinduTotal: 0,
            jindu: false
        };
    },

    computed: {
        getTime() {
            return (val) => {
                if (val) {
                    return moment(val).format("YYYY")
                } else {
                    return ""
                }
            }
        }
    },

    mounted() {
        this.getList();
        this.getCommon();
        this.getClassAll();
    },

    methods: {
        getClassAll() {
            getClassNewAll({ kindId: 4 }).then(res => {
                this.oneList = res.data
            })
        },


        handleShowJilu() {


            let formData = new FormData();
            formData.append('planMonthId', this.formData.id);
            formData.append('pageNum', this.jinduPage);
            formData.append('pageSize', this.jinduSize);
            PlanMonthRecorde(formData).then(res => {
                this.jinduData = res.data.list;
                this.jinduTotal = res.data.total;
                this.jindu = true;
            })
        },

        handleOneChange(value) {

            this.twoList = [];
            this.threeList = [];
            this.formData.repairProject = "";
            this.formData.workloadName = "";
            getClassmid({ classname: value }).then(res => {
                this.twoList = res.data
            })
        },

        handleTwoChange(value) {
            this.threeList = [];
            this.formData.workloadName = "";
            getClassdetail({
                classname: this.formData.engineeringCategory,
                classmid: value
            }).then(res => {
                this.threeList = res.data;
                if (this.threeList.length > 0) {
                    this.formData.workloadName = this.threeList[0].detail
                }
            })
        },

        handleOneChange1(value) {
            this.twoList1 = [];
            this.listQuery.repairProject = "";
            getClassmid({ classname: value }).then(res => {
                this.twoList1 = res.data
            })
        },
        getCommon() {
            getArea().then(res => {
                this.areaList = res.data
            })
        },

        handleQuchange(val) {
            this.listQuery.houseAdminId = null;
            if (val) {
                this.getHouseAdmin(val);

            } else {
                this.houseAdminList = [];
            }
        },

        handleFormQuchange(val) {
            this.formData.houseAdminId = null;
            this.handleHouseChange();
            if (val) {
                this.getFormHouseAdmin(val);

            } else {
                this.houseFormAdminList = [];
            }
        },

        getHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseAdminList = res.data.list;
            })
        },
        getFormHouseAdmin(val) {
            getHouseAdmin({ DID: val, pageNum: 1, pageSize: 100000 }).then(res => {
                this.houseFormAdminList = res.data.list;
            })
        },

        handleHouseChange(val) {
            this.formData.blockGroupId = null
            this.handleGuanpianChange();
            if (val) {
                getBlockGroup({ houseAdminId: val, pageNum: 1, pageSize: 10000 }).then(res => {
                    this.guanpianList = res.data.list;
                })
            } else {
                this.guanpianList = [];
            }
        },

        handleGuanpianChange(val) {

            this.formData.blockId = null
            this.handleSuoChange();
            if (val) {
                getBlockByGroup({ group: val, pageNum: 1, pageSize: 10000 }).then(res => {
                    this.suoList = res.data.list;
                })
            } else {
                this.suoList = [];
            }
        },


        handleSuoChange(val) {
            if (val) {
                this.suoList.forEach(item => {
                    if (item.blockid == val) {
                        this.formData.blockAddress = item.address
                        this.formData.propertyType = item.livingway
                        this.formData.blockName = item.blockno

                    }
                })
            } else {
                this.formData.blockAddress = ''
                this.formData.propertyType = ''
                this.formData.blockName = ''
            }
        },


        handleReportCallback(id) {
            this.$confirm(
                "是否回退该计划",
                "提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    backPlanMonth(id).then(res => {
                        Message({
                            message: res.message || '操作成功',
                            type: "success",
                            duration: 2 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        },

        handleReportPass(id) {

            // this.handleReportDialogClose()
            console.log(id)
            this.$confirm(
                "是否上报该计划",
                "提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    reportPlanMonth(id).then(res => {
                        Message({
                            message: res.message || '操作成功',
                            type: "success",
                            duration: 2 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        },

        handleSelectionChange(val) {
            this.multipleSelection = val;
        },


        handleReportDialogClose() {
            this.reportYear = null;
            this.reportTableData = [];
        },
        handleReportDialogOpen() {
            this.reportVisible = true;
        },

        handleSearchReportData() {
            listPlanMonth(this.listQuery).then((response) => {
                this.reportTableData = response.data.list;

            });
        },

        handleSearchDaoruData() {
            listPlanYearForImport({
                pageNum: this.daoruPageNum,
                pageSize: this.daoruPageSize
            }).then((response) => {
                this.reportDaoruTableData = response.data.list;
                this.daorutotal = response.data.total
            });
        },
        handleBatchImport() {
            this.uploadDialogVisible = true;
            this.handleSearchDaoruData();
        },

        handleUploadDialogClose() {
            this.reportDaoruTableData = [];
            this.daoruPageNum = 1;
            this.daoruPageSize = 10;
        },

        handleJinduClose() {
            this.jinduData = [];
            this.jinduPage = 1;
            this.jinduSize = 10;
            this.jindu = false
        },

        handleDaoruSelect() {
            let arr = [];
            this.multipleSelection.forEach(item => {
                arr.push(item.id)
            })

            let ids = arr.join(',');
            let formData = new FormData();
            formData.append('ids', ids);
            createPlanMonth(formData).then(res => {
                this.multipleSelection = [];
                this.$message.success('导入成功')
                this.uploadDialogVisible = false;
                this.getList()
            })



        },
        handleSubmitClick() {
            const { formData } = this;
            if (this.isAdd == 'add') {
                createPlanMonth({ ...formData, projectYear: this.formData.projectYear ? moment(this.formData.projectYear).format("YYYY-MM") : '' }).then(res => {
                    this.handleClose()
                    this.getList();
                    Message({
                        message: res.message || '操作成功',
                        type: "success",
                        duration: 2 * 1000,
                    });
                })
            }
            if (this.isAdd == 'update' || this.isAdd == 'details') {
                updatePlanMonth({ ...formData, projectYear: this.formData.projectYear ? moment(this.formData.projectYear).format("YYYY-MM") : '' }).then(res => {
                    this.handleClose()
                    this.getList();
                    Message({
                        message: res.message || '操作成功',
                        type: "success",
                        duration: 2 * 1000,
                    });
                })
            }

        },

        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },

        handleDaoruSizeChange(val) {
            this.daoruPageNum = 1;
            this.daoruPageSize = val;
            this.handleSearchDaoruData()
        },


        handlejindusizechange(val) {
            this.jinduPage = 1;
            this.jinduSize = val;
            this.handleShowJilu()
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },

        handleCurrentDaoruChange(val) {
            this.daoruPageNum = val;
            this.handleSearchDaoruData();
        },

        handlejinduchange(val) {
            this.jinduPage = val;
            this.handleShowJilu();
        },

        handleSearch() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        getList() {
            listPlanMonth(this.listQuery).then((response) => {
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },

        resetForm(val) {

            this.$refs[val].resetFields();
            this.listQuery.pageNum = 1;
        },

        handleAddUser(type) {
            this.isAdd = 'add';
            this.dialogVisible = true;


        },

        handleClose() {
            this.resetForm("dataForm");
            this.dialogVisible = false;
            this.houseFormAdminList = [];
            this.guanpianList = [];
            this.suoList = [];
        },

        async handleUpdate(currentData, type) {
            this.isAdd = type;
            //   一定要在打开弹窗前 再赋值 不然resetFiles没用
            this.dialogVisible = true;
            await this.handleFormQuchange(currentData.districtId)
            await this.handleHouseChange(currentData.houseAdminId)
            await this.handleGuanpianChange(currentData.blockGroupId)

            this.handleOneChange(currentData.engineeringCategory)
            this.formData.engineeringCategory = currentData.engineeringCategory
            this.handleTwoChange(currentData.repairProject)
            this.formData = { ...currentData }
            this.$forceUpdate()

        },

        handleDelete(id) {
            this.$confirm(
                "此操作将删除该条内容，请确认是否继续操作？",
                "删除提示",
                {
                    confirmButtonText: "保 存",
                    cancelButtonText: "取 消",
                    type: "warning",
                }
            )
                .then(() => {
                    deletePlanMonth(id).then(res => {
                        Message({
                            message: res.message || '操作成功',
                            type: "success",
                            duration: 2 * 1000,
                        });
                        this.getList();
                    })
                })
                .catch(() => { });
        }
    },
};
</script>

<style scoped>
.el-date-editor.el-input {
    width: 100%;
    cursor: pointer;
}

/* 上传组件标准样式 */
.upload-container {
    padding: 20px 0;
    width: 100%;
}

.upload-dragger {
    width: 100% !important;
}

.upload-dragger .el-upload {
    width: 100% !important;
}

.upload-dragger .el-upload-dragger {
    width: 100% !important;
    height: 200px;
    border: 2px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s ease;
    background-color: #fafafa;
    box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
    border-color: #409EFF;
    width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
    font-size: 67px;
    color: #C0C4CC;
    margin: 40px 0 16px;
    line-height: 50px;
    width: 100%;
}

.upload-dragger .el-upload__text {
    color: #606266;
    font-size: 14px;
    text-align: center;
}

.upload-dragger .el-upload__text em {
    color: #409EFF;
    font-style: normal;
}

.template-download {
    margin-top: 15px;
    font-size: 14px;
    color: #606266;
}

.template-download .el-button--text {
    color: #409EFF;
    padding: 0;
    font-size: 14px;
}

::v-deep .el-upload {
    width: 100% !important;
}

::v-deep .el-upload-dragger {
    width: 100% !important;
}

/* 附件查看弹窗样式 */
.attachment-view {
    padding: 20px;
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 24px;
    justify-items: center;
}

.attachment-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 120px;
}

.file-icon {
    width: 80px;
    height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.file-icon:hover {
    transform: scale(1.05);
}

/* 具体文件类型样式 */
.file-pdf {
    background: #EF4A37;
}

.pdf-lines {
    width: 48px;
    height: 36px;
    position: relative;
    margin-bottom: 8px;
}

.pdf-lines::before,
.pdf-lines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: white;
    border-radius: 1px;
}

.pdf-lines::before {
    top: 8px;
}

.pdf-lines::after {
    top: 16px;
}

.pdf-lines>span {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 3px;
    background: white;
    border-radius: 1px;
}

.file-word {
    background: #2B579A;
}

.word-icon {
    font-size: 32px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.file-excel {
    background: #217346;
}

.excel-icon {
    font-size: 32px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.file-image {
    background: #FF6B35;
}

.file-default {
    background: #909399;
}

.default-icon {
    font-size: 24px;
    color: white;
    font-weight: bold;
    margin-bottom: 8px;
}

.file-text {
    color: white;
    font-size: 12px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.file-name {
    font-size: 12px;
    color: #606266;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
    max-width: 100%;
}

/* 表单样式 */
.section-title {
    font-size: 16px;
    font-weight: bold;
    color: #20B2AA;
    margin: 20px 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #20B2AA;
}

.file-list-item {
    margin: 5px 0;
}

.file-list-item .el-button--text {
    color: #409EFF;
    padding: 0;
    font-size: 14px;
}

/* 文件预览样式 */
.file-preview-content {
    padding: 20px;
    text-align: center;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.image-preview {
    text-align: center;
}

.file-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.file-icon-large {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    position: relative;
    transition: transform 0.2s;
}

.file-icon-large:hover {
    transform: scale(1.05);
}

/* 大尺寸文件图标样式 */
.file-icon-large.file-pdf {
    background: #EF4A37;
}

.file-icon-large .pdf-lines {
    width: 72px;
    height: 54px;
    position: relative;
    margin-bottom: 12px;
}

.file-icon-large .pdf-lines::before,
.file-icon-large .pdf-lines::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: white;
    border-radius: 2px;
}

.file-icon-large .pdf-lines::before {
    top: 12px;
}

.file-icon-large .pdf-lines::after {
    top: 24px;
}

.file-icon-large .pdf-lines>span {
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    height: 4px;
    background: white;
    border-radius: 2px;
}

.file-icon-large.file-word {
    background: #2B579A;
}

.file-icon-large .word-icon {
    font-size: 48px;
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
}

.file-icon-large.file-excel {
    background: #217346;
}

.file-icon-large .excel-icon {
    font-size: 48px;
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
}

.file-icon-large.file-image {
    background: #FF6B35;
}

.file-icon-large.file-default {
    background: #909399;
}

.file-icon-large .default-icon {
    font-size: 36px;
    color: white;
    font-weight: bold;
    margin-bottom: 12px;
}

.file-icon-large .file-text {
    color: white;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.file-name-large {
    font-size: 16px;
    color: #303133;
    font-weight: 500;
    text-align: center;
    line-height: 1.4;
    word-break: break-all;
    max-width: 400px;
}

.file-size {
    font-size: 14px;
    color: #909399;
    font-weight: normal;
}

.report-top {
    display: flex;
    align-items: center;

    .el-date-editor.el-input {
        width: 200px;
    }

    span {
        color: #333333;
        margin-right: 10px;
    }

    .el-button {
        margin-left: 10px;
    }
}

.report-table {
    margin-top: 20px;
    padding-bottom: 20px;
}

.el-form-item__content .el-input-group {
    vertical-align: middle;
}
</style>